<template>
  <div :class="wrapClasses" ref="scrollWrapper">
    <div :class="scrollbarAreaClasses"
         @wheel="scroll"
         ref="scrollArea"
         :style="style"
         @touchstart="startDrag"
         @touchmove="onDrag"
         @touchend="stopDrag">
      <slot></slot>
    </div>
    <vertical-scrollbar
      v-if="ready"
      :scrollAreaHeight="scrollAreaHeight"
      :scrollWrapperHeight="scrollWrapperHeight"
      :scrollBarPostion="verticalScrollBarPostion"
      :dragging-from-parent="dragging"
      @change-position="handleChangePosition" />
    <horizontal-scrollbar
      v-if="ready"
      :scrollAreaWidth="scrollAreaWidth"
      :scrollWrapperWidth="scrollWrapperWidth"
      :scrollBarPostion="horizontalScrollBarPostion"
      :dragging-from-parent="dragging"
      @change-position="handleChangePosition" />
  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
